<template>
	<view>
		<zan-popup :show="show" @close="closePopup">
			<view class="pop-orderPay pop-example__container">
				<view class="pop-title">
					<text class="f-30">请选择支付方式</text>
				</view>
				<view class="pop-content">
					<view class="pay-method">
						<button v-for="(item, key) in payTypes" :key="key" class="btn-normal"
							@tap.stop.prevent="onSelectPayType(item.value)">
							<view class="pay-item dis-flex flex-x-between">
								<view class="item-left dis-flex flex-y-center">
									<view :class="['item-left_icon',item.class]">
										<text :class="[item.icon]"></text>
									</view>
									<view class="item-left_text">
										<text>{{ item.name }}</text>
									</view>
								</view>
							</view>
						</button>
					</view>
				</view>
			</view>
		</zan-popup>
	</view>
</template>

<script>
	import zanPopup from '@/components/popup/index';
	import {
		payTypes
	} from '@/module.js';
	export default {
		name: "pay-popup",
		components: {
			zanPopup
		},
		props: {
			show: Boolean
		},
		data() {
			return {
				payTypes: payTypes
			};
		},
		methods: {
			onSelectPayType: function(type) {
				this.$emit('selectpaytype', type);
			},
			closePopup: function() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/utils/common.scss";

	.f-30 {
		font-size: 30rpx;
	}

	.btn-normal {
		display: block;
		margin: 0;
		padding: 0;
		line-height: normal;
		background: none;
		border-radius: 0;
		box-shadow: none;
		border: none;
		font-size: unset;
		text-align: unset;
		overflow: visible;
		color: inherit;
	}

	.btn-normal:after {
		border: none;
	}

	.btn-normal.button-hover {
		color: inherit;
	}

	.dis-flex {
		display: flex !important;
		/* flex-wrap: wrap; */
	}

	.flex-x-between {
		justify-content: space-between;
	}

	.flex-y-center {
		align-items: center;
	}

	/* 弹出层：支付方式 */
	.pop-example__container {
		background: #fff;
		padding: 30rpx 40rpx;
		border-radius: 10rpx;
		min-width: 460rpx;
	}

	.pop-example__container .pop-title {
		text-align: center;
	}

	.pop-content {
		margin-top: 30rpx;
	}

	.pop-orderPay .pop-title {
		text-align: left;
	}

	.pay-method .pay-item {
		padding: 20rpx 0;
		font-size: 28rpx;
	}

	.pay-method .pay-item .item-left_icon {
		margin-right: 20rpx;
		font-size: 32rpx;
	}

	.pay-method .pay-item .item-left_icon.wechat text {
		color: #00c800;
	}

	.pay-method .pay-item .item-left_icon.alipay text {
		color: #06b4fd;
		font-size: 34rpx;
	}

	.pay-method .pay-item .item-left_icon.balance text {
		color: #ff9700;
	}
	.pay-method .pay-item .item-left_icon.ll-bank text {
		color: $uni-bg-color-main;
	}
</style>
